<template>
  <div class="d2-container-full" flex>
    <div v-if="$slots.leftWrap" class="left-container-wrap bgf">
      <slot ref="leftWrap" name="leftWrap"></slot>
    </div>
    <div class="right-con-wrap">
      <div v-if="$slots.header" ref="header" class="d2-container-full__header">
        <slot name="header"></slot>
      </div>
      <div ref="body" class="d2-container-full__body">
        <slot></slot>
      </div>
      <div v-if="$slots.footer" ref="footer" class="d2-container-full__footer">
        <slot name="footer"></slot>
      </div>
    </div>
  </div>
</template>

<script>
import scroll from "./mixins/normal";
export default {
  name: "D2ContainerFullLeftRight",
  mixins: [scroll],
  mounted() {
    // 增加滚动事件监听
    this.addScrollListener();
  },
  beforeDestroy() {
    // 移除滚动事件监听
    this.removeScrollListener();
  },
};
</script>

<style lang="scss" scoped>
.d2-container-full {
  flex-direction: row !important;
  .left-container-wrap {
    width: 200px;
    flex-shrink: 0;
    border-right: 1px solid #cfd7e5;
  }
  .right-con-wrap {
    flex: 1;
    display: flex;
    width: calc(100% - 201px);
    flex-direction: column;
  }
}
</style>
